<!-- 张梦莉  2017-12-11 快递公司管理-->

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="filters.search" placeholder="快递公司名称">
                        <el-button slot="append" v-on:click="getList" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="default" v-on:click="handleRestFilter" icon="el-icon-refresh"></el-button>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-form-item>
                        <el-button type="primary" v-on:click="handleAdd" icon="el-icon-plus"></el-button>
                    </el-form-item>
                    <!--<el-form-item>-->
                        <!--<el-button type="danger" @click="batchStatus" icon="el-icon-delete"-->
                                   <!--:disabled="this.sels.length===0"></el-button>-->
                    <!--</el-form-item>-->
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="ExpComList" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="index" width="55" sortable>
            </el-table-column>
            <el-table-column prop="delivery_code" label="快递公司代码">
            </el-table-column>
            <el-table-column prop="delivery_name" label="快递公司名称">
            </el-table-column>
            <el-table-column prop="delivery_type" label="类型">
            </el-table-column>
            <el-table-column prop="delivery_template_size" label="快递模板规格">
            </el-table-column>
            <el-table-column prop="delivery_template_type" label="快递模板类型">
            </el-table-column>
            <el-table-column label="显示状态" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.delivery_status==1" :active-value="true" :inactive-value="false" @change="editStatus(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="210">
                <template slot-scope="scope">
                    <span class="pr-3 click-detail" @click="handleEdit(scope.row)">编辑</span>
                    <span class="click-detail"  @click="deleteExpress(scope.row)">删除</span>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                           @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total">
            </el-pagination>

        </el-col>

        <!--编辑界面-->
        <el-dialog title="" :visible.sync="editFormVisible" width="30%" :close-on-click-modal="false">
            <div slot="title" class="dialog-title">编辑</div>
            <el-form :model="editForm" label-width="110px" :rules="editFormRules" class="demo-form-inline"
                     ref="editForm">
                <el-form-item label="快递公司名称" prop="delivery_name">
                    <el-input v-model="editForm.delivery_name" auto-complete="off" autofocus></el-input>
                </el-form-item>
                <el-form-item label="快递公司代码" prop="delivery_code">
                    <el-input v-model="editForm.delivery_code" auto-complete="off" autofocus></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="delivery_type">
                    <el-input v-model="editForm.delivery_type" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用状态" prop="delivery_status">
                    <el-switch v-model="editForm.delivery_status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="快递模板规格" prop="delivery_template_size">
                    <el-input-number :min="0" :step="1" v-model="editForm.delivery_template_size" auto-complete="off"></el-input-number>
                </el-form-item>
                <el-form-item label="快递模板类型" prop="delivery_template_type">
                    <el-input v-model="editForm.delivery_template_type" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="收件网点标识" prop="delivery_send_site">
                    <el-input v-model="editForm.delivery_send_site" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子面单账户" prop="delivery_customer_name	">
                    <el-input v-model="editForm.delivery_customer_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子面单密码" prop="delivery_customer_pwd">
                    <el-input v-model="editForm.delivery_customer_pwd" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--新增界面-->
        <el-dialog title="新增" :visible.sync="addFormVisible" width="30%" :close-on-click-modal="false">
            <div slot="title" class="dialog-title">新增</div>
            <el-form :model="addForm" label-width="110px" :rules="addFormRules" ref="addForm">
                <el-form-item label="快递公司代码" prop="delivery_code">
                    <el-input v-model="addForm.delivery_code" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="快递公司名称" prop="delivery_name">
                    <el-input v-model="addForm.delivery_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="delivery_type">
                    <el-input v-model="addForm.delivery_type" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用状态" prop="delivery_status">
                    <el-switch v-model="addForm.delivery_status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="快递模板规格" prop="delivery_template_size">
                    <el-input-number :min="0" :stap="1" v-model="addForm.delivery_template_size" auto-complete="off"></el-input-number>
                </el-form-item>
                <el-form-item label="快递模板类型" prop="delivery_template_type">
                    <el-input v-model="addForm.delivery_template_type" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="收件网点标识" prop="delivery_send_site">
                    <el-input v-model="addForm.delivery_send_site" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子面单账户" prop="delivery_customer_name">
                    <el-input v-model="addForm.delivery_customer_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子面单密码" prop="delivery_customer_pwd">
                    <el-input v-model="addForm.delivery_customer_pwd" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false; $refs['addForm'].resetFields()">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
  import {getExpressCompanyList, editExpressCompany, addExpressCompany, deleteExpressCompany} from '../../api/api';

  export default {
    data () {
      return {
        filters: {
          pageSize: 10,
          search: '',
          page: 1
        },
        ExpComList: [], // 快递公司集合
        total: 0,
        listLoading: false,
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        editFormRules: {
          delivery_name: [
            {required: true, message: '请输入快递公司名称', trigger: 'blur'}
          ],
          delivery_code: [
            {required: true, message: '请输入快递公司代码', trigger: 'blur'}
          ]
        },
        // 编辑界面数据
        editForm: {
          delivery_id: null,
          delivery_name: '',
          delivery_code: '',
          delivery_type: '',
          delivery_status: null,
          delivery_template_size: null,
          delivery_template_type: '',
          delivery_send_site: '', // 收件网点标识
          delivery_customer_name: '', // 电子面单账户
          delivery_customer_pwd: '' // 电子面单密码
        },
        addFormVisible: false, // 新增界面是否显示
        addLoading: false,
        addFormRules: {
          delivery_name: [
            {required: true, message: '请输入快递公司名称', trigger: 'blur'}
          ],
          delivery_code: [
            {required: true, message: '请输入快递公司代码', trigger: 'blur'}
          ]
        },
        // 新增界面数据
        addForm: {
          delivery_name: '',
          delivery_code: '',
          delivery_type: '',
          delivery_status: null,
          delivery_template_size: null,
          delivery_template_type: '',
          delivery_send_site: '', // 收件网点标识
          delivery_customer_name: '', // 电子面单账户
          delivery_customer_pwd: '' // 电子面单密码
        }

      }
    },
    computed: {
    },
    methods: {
      // 重置搜索
      handleRestFilter () {
        this.filters = {
          pageSize: 10,
          delivery_name: '',
          page: 1
        };
        this.getList()
      },
      handleCurrentChange (val) {
        this.filters.page = val;
        this.getList();
      },
      // 条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size;
        this.getList();
      },
      // 获取服务器列表
      getList () {
        this.listLoading = true;
        getExpressCompanyList(this.filters).then((res) => {
          this.total = res.totalCount;
          this.ExpComList = res.data;
          this.listLoading = false;
        });
      },
      // 显示编辑界面
      handleEdit (row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
      },
      // 显示新增界面
      handleAdd () {
        this.addFormVisible = true;
      },
      // 更改状态
      editStatus (row) {
        this.editForm = Object.assign({}, row);
        if (row.delivery_status === 1) {
          this.editForm.delivery_status = 0
        } else {
          this.editForm.delivery_status = 1
        }
        editExpressCompany(this.editForm).then((res) => {
          this.getList();
          this.editLoading = false;
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '状态更改成功',
              type: 'success'
            });
          } else {
            this.$alert('状态更改失败', '失败', {type: 'error'});
          }
        });
      },
      // 编辑
      editSubmit () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;
              editExpressCompany(this.editForm).then((res) => {
                this.getList();
                this.editLoading = false;
                if (parseInt(res.status) === 1) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                } else {
                  this.$alert('编辑失败', '失败', {type: 'error'});
                }
                this.$refs['editForm'].resetFields();
                this.editFormVisible = false;
              });
            });
          }
        });
      },
      // 新增
      addSubmit () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;
              addExpressCompany(this.addForm).then((res) => {
                this.addLoading = false;
                if (parseInt(res.status) === 1) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                } else {
                  this.$alert('添加失败', '失败', {type: 'error'});
                }
                this.$refs['addForm'].resetFields();
                this.addFormVisible = false;
                this.getList();
              });
            });
          }
        });
      },
      deleteExpress (row) {
        this.$confirm('确定要删除<' + row.delivery_name + '>吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteExpressCompany(row.delivery_id).then(res => {
            if (parseInt(res.status) === 1) {
              this.getList();
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              this.$alert('删除失败', '失败', {type: 'error'});
            }
          })
        })
      }
    },
    mounted () {
      this.getList();
    },
    watch: {}
  }
</script>
<style rel='stylesheet/sass' lang='sass' scoped=''>
    .click-detail
        color: #409EFF
        cursor : pointer
    .click-detail:hover
        color: #443dff
</style>
